<template>
  <div class="home1">
    <!-- 头部 -->
    <!-- <van-nav-bar title="艳艳小店" left-text="返回" right-text="按钮" left-arrow/> -->
    <Header></Header>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <img src="@/assets/imgs/swiper1.jpg">
      </van-swipe-item>
      <van-swipe-item>
        <img src="@/assets/imgs/test.jpg">
      </van-swipe-item>
      <van-swipe-item>
        <img src="@/assets/imgs/huaju.jpeg">
      </van-swipe-item>
      <van-swipe-item>
        <img src="@/assets/imgs/swiper1.jpg">
      </van-swipe-item>
    </van-swipe>
    <!-- 九宫格 -->
    <div class="navs">
      <div class="nav">
        <img src="@/assets/imgs/icon-qiandao.png">
        <span>签到</span>
      </div>
      <div class="nav">
        <img src="@/assets/imgs/icon-fujin.png">
        <span>附近</span>
      </div>
      <div class="nav">
        <img src="@/assets/imgs/icon-zhanhui.png">
        <span>旅展</span>
      </div>
      <div class="nav">
        <img src="@/assets/imgs/icon-fuli.png">
        <span>福利</span>
      </div>
      <div class="nav">
        <img src="@/assets/imgs/icon-muma.png">
        <span>玩乐</span>
      </div>
      <div class="nav">
        <img src="@/assets/imgs/icon-xingxing.png">
        <span>周边</span>
      </div>
      <div class="nav">
        <img src="@/assets/imgs/icon-tiyu.png">
        <span>体育</span>
      </div>
      <div class="nav">
        <img src="@/assets/imgs/icon-qinzi.png">
        <span>亲子</span>
      </div>
    </div>
    <!-- 下拉刷新 -->
    <div class="wapper">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <!-- <van-cell v-for="item in list" :key="item" :title="item"/> -->
          <van-card
            num="2"
            price="2.00"
            desc="描述信息"
            title="商品标题"
            v-for="item in list"
            :key="item"
            thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
          />
        </van-list>
      </van-pull-refresh>
    </div>

    <!-- tabbar 底部导航-->
    <Tabbar/>
    <!-- <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o">标签</van-tabbar-item>
      <van-tabbar-item icon="search" dot>标签</van-tabbar-item>
      <van-tabbar-item icon="friends-o" badge="5">标签</van-tabbar-item>
      <van-tabbar-item icon="setting-o" badge="20">标签</van-tabbar-item>
    </van-tabbar>-->
  </div>
</template>
<script>
import Vue from "vue";
import { Toast } from "vant";
// 导入组件
import Header from "./Header";
import Tabbar from "./Tabbar";

Vue.use(Toast);
export default {
  // 激活组件
  components: {
    Header,
    Tabbar
  },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      refreshing: false
    };
  },
  methods: {
    onLoad() {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0
      });
      setTimeout(() => {
        Toast.clear();
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }

        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        this.loading = false;

        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    }
  }
};
</script>

 <style lang="scss" scoped>
@import "@/assets/css/common.scss";
.home1 {
  van-nav-bar {
    background: #69c3aa;
  }
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    height: 150px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }

  .navs {
    width: 100%;
    height: px2rem(174);
    // background: blue;
    background: white;
    display: flex;
    flex-wrap: wrap;

    .nav {
      width: 25%;
      height: px2rem(87);
      // background: green;
      background: white;

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      span {
        margin-top: px2rem(10);
      }
      img {
        width: px2rem(40);
        height: px2rem(40);
      }
    }
  }
}
</style>
